<template>
  <div>
    <h1>Vant组件库体验</h1>
    <!-- van-button 自定义组件的名称，为什么能在这里调用组件？ -->
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    <hr>
    <van-icon name="chat-o" />
    <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
  </div>
</template>

<script>
// Vue 是单页面应用，首次打开不快，所以尽可能优化一下，按需导入。
// 方式2：手动按需引入
// 目标：按需导入，只引入需要使用的组件
// 1. 新建组件，不需要我们做，第三方下载过来
// 2. 导入组件，导入 按钮 + 样式
// 3. 注册组件
// 4. 使用组件
// import Button from "vant/lib/button";
// // console.log(Button);     // { name: 'vant-button' }
// import "vant/lib/button/style";
export default {
  // components: {
  //   // 'van-button': Button
  //   [Button.name]: Button,
  // },
};
</script>

<style>
</style>